<template>
	<Popup :show="isPopup" :width="width" :height="height" type="middle" :backgroundColor="backgroundColor" :boxShadow="boxShadow" :padding="0" @hidePopup="hidePopupFunc">
		<view class="more-bill-box">
			<view class="d-c-c p30 f30 border-b">
				{{$t('plus.group_buying')}}
			</view>
			<view class="list">
				<template v-for="(item,index) in bill" :key="index">
					<template v-if="index<10">
						<view class="item d-b-c p20 border-b">
							<view class="d-s-c">
								<view class="photo">
									<image :src="item.avatarUrl" mode="widthFix"></image>
								</view>
								<view class="d-s-c ml20 d-c lh150">
									<view class="d-s-c ww100">
										<text>{{ item.nickName }}</text>
										<text class="ml10">{{$t('plus.still_needed0',{place1: item.difPeople })}}</text>
									</view>
									<view class="ww100 gray9">
										<Countdown :config="rturnObjec(item)"></Countdown>
									</view>
								</view>
							</view>
							<view class="">
								<button class="btn-red" type="default"  @click="goBill(item)">{{$t('plus.go_group_order')}}</button>
							</view>
						</view>
					</template>
					<view class="d-c-c p30 gray9 f28" v-if="bill.length>10">
						{{$t('plus.showing_orders',{place1:10})}}
					</view>
				</template>
				
			</view>
		</view>
	</Popup>
</template>

<script>
	import Popup from '@/components/uni-popup.vue';
	import Countdown from '@/components/countdown/countdown.vue';
	export default{
		components:{
			Popup,
			Countdown
		},
		data(){
			return{
				/*是否显示*/
				isPopup: false,
				/*展示类别*/
				type: 0,
				/*宽度*/
				width: 600,
				/*高度*/
				height: 1200,
				/*背景颜色*/
				backgroundColor: 'none',
				/*阴影*/
				boxShadow: 'none',
			}
		},
		props:['ismore','bill'],
		watch:{
		},
		created() {
			this.isPopup=this.ismore;
		},
		methods:{
			
			/*转换参数*/
			rturnObjec(item){
				return {type:'text',startstamp:0,endstamp:item.endTime};
			},
			
			/*关闭弹窗*/
			hidePopupFunc(){
				this.$emit('closeMore',false)
			},
			
			/*去拼单*/
			goBill(e) {
				this.$emit('gobill', e);
			}
			
		}
	}
</script>

<style>
	.more-bill-box{ width: 100%; background: #FFFFFF;}
	.more-bill-box .list{ max-height: 660rpx; overflow-y: auto; box-shadow: 0 -10rpx 30rpx 0 inset rgba(255,255,255,.5);}
	.more-bill-box .photo{ width: 60rpx; height: 60rpx; border-radius: 50%; overflow: hidden;}
	.more-bill-box .photo image{ width: 100%; height: 100%;}
</style>
